<template>
  <div class="project">
    <header class="project-header">
      <div>
        <h6 class="project-header__title">项目管理说明</h6>
        <p class="project-header__desc">新建项目后程序默认生成关于项目的基础配置</p>
      </div>
      <div class="project-header__search">
        <el-input
          placeholder="项目名称/项目编码"
          style="width: 260px"
          class="mr10"
          v-model="searchStr"
          clearable
        ></el-input>
        <div class="project-header__search--btn" @click="search()">搜索</div>
      </div>
    </header>
    <main class="project-container">
      <section class="project-container__add common-block" @click="addOrEdit()" v-if="isCanAdd">
        <img src="@/assets/add.png" alt="" class="mr10" />
        <h6>新增项目</h6>
      </section>
      <section class="common-block project-container__list" v-for="(item, index) in list" :key="index">
        <header class="project-container__list--header">
          <img :src="item.logo" alt="" class="mr10" />
          <h6 class="project-container__list--header__title">{{ item.name }}</h6>
        </header>
        <article class="project-container__list--desc">
          {{ item.description }}
        </article>
        <footer class="project-container__list--footer">
          <section class="project-container__list--footer__left">项目编号：{{ item.code }}</section>
          <section class="project-container__list--footer__right">
            <div class="mr20" @click="addOrEdit(item)" v-if="isCanEdit">
              <img src="@/assets/edit.png" alt="" />
              <span>编辑</span>
            </div>
            <div @click="openOrDisable(item)" v-if="isCanEnableDisable">
              <img src="@/assets/disable.png" alt="" />
              <span>{{ item.status === '1' ? '禁用' : '启用' }}</span>
            </div>
          </section>
        </footer>
      </section>
    </main>
    <BasePagination :isModifyBackground="true" :pagination="pageParams" @change="changePage"></BasePagination>
    <AddEditPop ref="AddEditPop" @saveSuccess="saveSuccess"></AddEditPop>
  </div>
</template>

<script>
import BasePagination from '@/components/BaseTable/pagination.vue'
import AddEditPop from '../components/AddEditPop.vue'

export default {
  name: 'projectManagementList',
  components: {
    BasePagination,
    AddEditPop,
  },
  data() {
    return {
      pageParams: {
        pageNo: 1,
        pageSize: 15,
        total: 0,
      },
      searchStr: '',
      list: [],
    }
  },
  computed: {
    isCanAdd() {
      return this.$checkAccess('MENU_PAGE_MANAGEMENT_ADD')
    },
    isCanEdit() {
      return this.$checkAccess('MENU_PAGE_MANAGEMENT_EDIT')
    },
    isCanEnableDisable() {
      return this.$checkAccess('MENU_PAGE_MANAGEMENT_ENABLE_DISABLE')
    },
  },
  methods: {
    search() {
      this.pageParams.pageNo = 1
      this.getListRequest()
    },
    addOrEdit(item) {
      this.$refs.AddEditPop.show(item)
    },
    //禁用启用开关
    async openOrDisable(item) {
      if (item.status === '1') {
        const action = await this.confirmBox('项目禁用后企业将无法打开该项目的平台，是否确认禁用？', '确认禁用?')
        action && this.openOrDisableRequest(item.id, item.status)
      } else {
        const action = await this.confirmBox('', '确认启用？')
        action && this.openOrDisableRequest(item.id, item.status)
      }
    },
    //禁用启用二次弹窗
    async confirmBox(subTitle, title) {
      const action = await this.$confirm(subTitle, title, { confirmButtonText: '保存', cancelButtonText: '取消' })
      return action
    },
    async getListRequest() {
      const params = {
        current: this.pageParams.pageNo,
        limit: this.pageParams.pageSize,
        searchStr: this.searchStr,
      }
      const { total, records } = await this.$http.get(`/app/page_list`, {
        params: params,
      })
      this.pageParams.total = total
      this.list = records
    },
    //启用禁用请求
    async openOrDisableRequest(id, status) {
      const state = status === '0' ? '1' : '0'
      await this.$http.put(`/app/${id}/update_status`, { status: state })
      this.pageParams.pageNo = 1
      this.searchStr = ''
      await this.getListRequest()
    },
    changePage({ pageNo }) {
      if (pageNo) {
        this.pageParams.pageNo = pageNo
        this.getListRequest()
      }
    },
    saveSuccess(val) {
      if (val) {
        this.pageParams.pageNo = 1
        this.searchStr = ''
        this.getListRequest()
      }
    },
  },
  mounted() {
    document.querySelector('.layout-container__main').style.background = '#f7f7f7'
    this.getListRequest()
  },
  destroyed() {
    document.querySelector('.layout-container__main').style.background = '#fff'
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
